<template>
  <div class="nav">
    <div class="left">
      <router-link to="/all">
        <template #default="{ href, isActive }">
          <a :href="href" :class="{ active: isActive }">首页</a>
        </template>
      </router-link>

      <router-link to="/about">
        <template #default="{ href, isActive }">
          <a :href="href" :class="{ active: isActive }">关于我们</a>
        </template>
      </router-link>

      <router-link to="/join">
        <template #default="{ href, isActive }">
          <a :href="href" :class="{ active: isActive }">加入我们</a>
        </template>
      </router-link>

      <div class="search">
        <el-input
          v-model="provideObj.title.value"
          placeholder="请输入标题"
        ></el-input>
        <el-button
          size="small"
          :icon="Search"
          circle
          @click="provideObj.toSearch"
        ></el-button>
      </div>
    </div>

    <router-link v-if="isLogin" to="/login">
      <template #default="{ href, isActive }">
        <a :href="href" class="login" :class="{ active: isActive }">登录</a>
      </template>
    </router-link>
    <div v-else class="user">
      <avatar
        class="user-avatar"
        :style="{ visibility: isShow ? 'hidden' : 'visible' }"
        @mouseover="isShow = true"
      ></avatar>

      <transition name="user">
        <user-info-card
          v-if="isShow"
          @mouseleave="isShow = false"
        ></user-info-card>
      </transition>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, inject, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { useOathStore } from '@core/pinia/stores/oath';
import Avatar from '@pages/components/avatar/avatar.vue';
import UserInfoCard from '@components/user-info/user-info.vue';
import { NavProvideType, NAV_PROVIDE_KEY } from './nav';

const provideObj = inject<NavProvideType>(NAV_PROVIDE_KEY);

const isShow = ref(false);
const userInfo = useOathStore();
const isLogin = computed(() => {
  return !userInfo.userInfo.id;
});
</script>

<style lang="scss" scoped>
.user-enter-active,
.user-leave-active {
  transform-origin: 50% 0px;
  transition: all 0.2s ease;
}

.user-enter-from,
.user-leave-to {
  opacity: 0;
  transform: scale(0.5) translateX(-50%);
}
.nav {
  width: 70%;
  height: 100%;
  display: flex;
  padding-right: 50px;
  align-items: center;
  justify-content: space-between;

  > .user {
    width: 100px;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    height: calc(100% + 20px);

    .user-avatar {
      transform: all 0.1s ease;
    }
  }

  .left {
    flex: 1;
    display: flex;
    a {
      margin-right: 100px;
    }
  }

  .login {
    width: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    background-color: var(--grey-color8);
  }

  a {
    display: flex;
    align-items: center;
    color: #676767;
    font-size: 20px;
  }

  a:not(:last-child) {
    font-size: 16px;
    margin-right: 10px;
  }

  a:nth-last-child(2) {
    margin-right: 60px;
  }

  a:active {
    color: var(--yellow-color2);
  }

  a.active {
    color: var(--pink-color1);
    border-bottom: 3px solid var(--pink-color1);
  }

  .login.active {
    border-bottom: none;
  }

  .search {
    width: 200px;
    display: flex;
    align-items: center;

    button {
      margin-left: -30px;
    }
  }
}
</style>
